import React from 'react';
import { Card, Typography, Tooltip } from 'antd';
import { PictureOutlined } from '@ant-design/icons';
import './StyleSelector.css';

const { Title } = Typography;

const StyleSelector = ({ selectedStyle, onStyleSelect, disabled }) => {
  const styles = [
    { key: 'none', name: '无风格', icon: '🖼️', description: '保持原始图像风格' },
    { key: 'miyazaki', name: '宫崎骏风格', icon: '🏯', description: '梦幻而富有诗意的动画风格' },
    { key: 'lego', name: '乐高风格', icon: '🧱', description: '像乐高积木一样的像素块状效果' },
    { key: 'pixar', name: '皮克斯风格', icon: '🚀', description: '光滑细腻的3D动画效果' },  
    { key: 'disney', name: '迪士尼风格', icon: '🏰', description: '童话般的动画风格' },
    { key: 'custom', name: '自定义风格', icon: '✏️', description: '通过文字描述创建个性化风格' },
  ];

  const handleStyleSelect = (styleKey) => {
    if (!disabled) {
      onStyleSelect(styleKey);
    }
  };

  return (
    <Card className="style-selector-card">
      <Title level={4} className="style-title">
        <PictureOutlined /> 选择艺术风格
      </Title>
      
      <div className={`style-options ${disabled ? 'disabled' : ''}`}>
        {styles.map((style) => (
          <Tooltip key={style.key} title={style.description} placement="bottom">
            <div 
              className={`style-option ${selectedStyle === style.key ? 'selected' : ''} ${disabled ? 'disabled' : ''}`}
              onClick={() => handleStyleSelect(style.key)}
            >
              <div className="style-icon">{style.icon}</div>
              <div className="style-name">{style.name}</div>
            </div>
          </Tooltip>
        ))}
      </div>
    </Card>
  );
};

export default StyleSelector;